<template>
  <div class="raw">
    <div id="chartRowStack" class="chartRowStack"></div>
    <!-- <div class="raw-content">
      <div class="raw-text">
        <el-carousel height="2.5rem" autoplay direction="vertical" indicator-position="none">
          <el-carousel-item style="height: 100%">
            <p>
              山东玉米 <span>2203 (元/吨)</span>
            </p>
            <p>
              山东豆粕 <span>3196 (元/吨)</span>
            </p>
            <p>
              河南玉米 <span>2173 (元/吨)</span>
            </p>
            <p>
              河南豆粕 <span>3172 (元/吨)</span>
            </p>
          </el-carousel-item>
          <el-carousel-item style="height: 100%">
            <p v-for="(item, index) in 4" :key="index">
              我是标题 <span>我是第二页内容</span>
            </p>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div> -->
  </div>
</template>

<script setup>
import { color } from "echarts";
import { inject, onMounted,ref } from "vue";
import generateDateArray from "@/utils/days.js";


onMounted(() => {
  let $echarts = inject("echarts");
  console.log($echarts);
  let myChart = $echarts.init(document.getElementById("chartRowStack"));

  const day = ref(generateDateArray(7))
  console.log(day)

  myChart.setOption({
    title: {
      text: "(元/斤)",
      textStyle: {
        fontSize: "oblique",
        color: "#fff",
      },
      top: 11,
      left: -5,
    },
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: [
        {
          name: "玉米",
          textStyle: {
            color: "#fff",
          },
        },
        {
          name: "豆粕",
          textStyle: {
            color: "#fff",
          },
        },
      ],
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },

    xAxis: {
      type: "category",
      boundaryGap: false,
      data: day.value,
    },
    yAxis: [
      {
        name: "玉米",
        type: "value",
        max: 2,
        min: 0.6,
      },
      {
        name: "豆粕",
        type: "value",
        max: 2,
        min: 0.5,
      },
    ],

    textStyle: {
      color: "#fff",
    },
    series: [
      {
        name: "玉米",
        type: "line",
        zlevel: 1,
        // stack: 'Total',
        color: "skyblue",
        data: [2.3/2, 2.2/2, 2.2/2, 2.4/2, 2.3/2, 2.2/2, 2.1/2],
        stack: "原",
        areaStyle: {
        },
        itemStyle: {
          color: "#2646C3"
        }
      },
      {
        name: "豆粕",
        type: "line",
        zlevel: 0,
        // stack: 'Total',
        color: "pink",
        data: [2.9/2, 2.8/2, 2.711/2, 2.896/2, 2.694/2, 2.7/2, 2.914/2],
        yAxisIndex: 1,
        stack: "原料",
        areaStyle: {
          color:"#33C326",
          emphasis: {
            disable: 'true',
          },
        },
        itemStyle: {
          color:"#33C326",
        }
      },
    ],
  });
  setInterval(() => {
    // dayData.value[0] +=
    generateDateArray(7)
    myChart.setOption({
      xAxis: {
        data: day.value,
      },
    });
  },10000)
});
</script>

<style lang="less" scoped>
.raw {
  // box-sizing: border-box;
  width: 100%;
  height: 3.2rem;
  background-image: url(../assets/imgs/icon_hjzs_new.png);
  background-repeat: no-repeat;
  background-size: 100%;
  padding: 0.75rem 0.2rem 0.25rem;
  box-sizing: border-box;
  margin-top: 0.15rem;

  .raw-content {
    height: 100%;
    /* padding-top: 10px; */
    box-sizing: border-box;
    overflow: scroll;
    position: relative;
    /* background-color: #ffcc00; */
    margin-top: 0.0625rem;

    .raw-text {
      color: #fff;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
    }

    .raw-text p {
      padding: 0.125rem 0rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      /* background-color: #00ffff; */
      width: 100%;
      font-size: 0.2rem;
    }
  }
}

.chartRowStack {
  width: 100%;
  height: 100%;
}
</style>
